<template>
  <scroll-bar class="shopRank-wrapper all-container">
    <vue-seamless-scroll :data="rankData" :class-option="classOption" :key="num">
      <div class="shop-item flex" v-for="(item, index) in rankData" :key="index">
        <div style="width:130px">
          <span class="rankIndex inline-block">
            <!-- <i class="iconfont" :class="'icon-' + rankIndex[index + 1]" :size="30" v-if="index < 3" />
            <span v-else> {{ index + 1 }}</span> -->
            <span> {{ index + 1 }}</span>
          </span>

          <span style="margin-left:10px">{{ item.name }}</span>
        </div>
        <a-progress
          :stroke-color="{
            from: '#3dadf6',
            to: '#737bfc'
          }"
          :percent="filterValue(item.score)"
          class="flex-sub"
          :showInfo="false"
        />
        <div style="margin-left:10px">{{ item.score }}</div>
      </div>
    </vue-seamless-scroll>
  </scroll-bar>
</template>

<script>
import vueSeamlessScroll from 'vue-seamless-scroll'
import { findAllAccount } from '@/api/config'
export default {
  name: 'scoreRank',
  // props: {
  //   rankData: Array
  // },
  components: { vueSeamlessScroll },
  data () {
    return {
      classOption: {
        step: 0.3,
        waitTime: 1000,
        autoPlay: false,
        switchDelay: 1000,
        singleHeight: 40
      },
      rankIndex: {
        1: 'jinpai',
        2: 'yinpai',
        3: 'tongpai'
      },
      timer: null,
      // 这里加个key值来刷新 滚动 从第一个开始
      num: Math.random(0, 1000),
      rankData: []
    }
  },
  computed: {
    max () {
      if (this.rankData.length === 0) return 0
      return this.rankData[0].score
    }
  },
  async mounted () {
    await this.getMemberList()
  },
  methods: {
    // 会员列表
    async getMemberList (status) {
      let params = {
        auditsStatus: 'PASS',
        pageSize: 10,
        pageNum: 1,
        userRole: 'ROLE_VENDOR'
      }
      let res = await findAllAccount(params)
      if (res.code === 200) {
        // this.rankData = res.data.items.sort(function (a, b) { return b.score - a.score })
        // TODO 丰富数据
        let arr = [...res.data.items, { name: '张晗', score: 10 }, { name: '谷晗硕', score: 10 }, { name: '杨琪', score: 10 }, { name: '傅雨', score: 10 }, { name: '雷朔', score: 10 }, { name: '朱明', score: 10 }, { name: '李春兰', score: 10 }, { name: '张玉', score: 10 }, { name: '薛俊博', score: 10 }, { name: '化蕊', score: 10 }, { name: '张瑜', score: 10 }, { name: '王子奇', score: 10 }]
        this.rankData = arr.sort(function (a, b) { return b.score - a.score })
      }
    },
    filterValue (val) {
      if (!val || this.max === 0) {
        return 0
      }
      return parseInt((val / this.max) * 100)
    }
  },
  beforeDestroy () {
    if (this.timer) {
      clearTimeout(this.timer)
      this.timer = null
    }
  },
  watch: {
    rankData: {
      handler (nl, ol) {
        this.classOption.autoPlay = false
        if (this.timer) {
          clearTimeout(this.timer)
        }
        this.num = Math.random(0, 1000)
        this.timer = setTimeout(() => {
          this.classOption.autoPlay = true
          clearTimeout(this.timer)
          this.timer = null
        }, 2000)
      },
      deep: true,
      immediate: true
    }
  }
}
</script>
<style lang="stylus" scoped>
.shop-item
  margin-bottom 16px
  font-size 1rem
  .rankIndex
    width 30px
    height 30px
    text-align center
    vertical-align middle
</style>
